<template>
  <el-container>
    <el-header>
      <Title :title="title" :SecTitle="SecTitle" />
    </el-header>
    <el-main>
      <el-row>
        <el-col>
          <el-form :inline="true" :model="mainform">
            <el-form-item label="名称" style="margin-left:5px">
              <el-input
                v-model="mainform.planName"
                placeholder="请输入名称"
                style="width:150px"
              >
              </el-input>
            </el-form-item>

            <el-form-item label="预案类型" style="margin-left:5px">
              <el-input
                v-model="mainform.planType"
                placeholder="请输入预案类型"
                style="width:150px"
              >
              </el-input>
            </el-form-item>

            <el-form-item label="事故类型">
              <el-select
                v-model="mainform.accidentType"
                placeholder="请选择"
                style="width:150px"
              >
                <el-option
                  v-for="(item, index) in ATdata"
                  :label="item"
                  :value="item"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onFilter">筛选</el-button>
            </el-form-item>

            <el-form-item class="addBtn">
              <el-button type="primary" @click="handleAdd">添加</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-table :data="PLform" style="width:100%">
        <el-table-column prop="planName" label="预案名称" width="auto">
        </el-table-column>
        <el-table-column prop="planType" label="预案类型" width="auto">
        </el-table-column>
        <el-table-column prop="accidentType" label="适用事故类型" width="auto">
        </el-table-column>
        <el-table-column prop="newTime" label="更新时间" width="180">
        </el-table-column>
        <el-table-column prop="" label="操作" width="auto">
          <template slot-scope="resData">
            <el-button
              class="view"
              type="info" plain
              @click="handleView(resData.$index, resData.row)"
              >查看</el-button
            >
            <el-button
              class="edit"
              type="warning" plain
              @click="handleEdit(resData.$index, resData.row)"
              >编辑</el-button
            >
            <el-button
              class="delete"
              type="danger" plain
              @click="handleDelete(resData.$index, resData.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <el-footer>
      <Paging
        @pagesizeChange="getPagesize"
        @currentPageChange="getCurrentPage"
        :pagesize="pageSize"
        :currentPage="page"
        :total="total"
      ></Paging>
    </el-footer>

    <!-- 查看弹出框 -->
    <div class="layout" v-show="viewVis">
      <div class="container">
        <h3>查看</h3>
        <div class="close" @click="viewVis = false">X</div>
        <table>
          <caption>
            现场处置预案
          </caption>
          <tr>
            <td>预案名称</td>
            <td>{{ Vdata.planName }}</td>
            <td>预案类型</td>
            <td>{{ Vdata.planType }}</td>
          </tr>
          <tr>
            <td>预案归属</td>
            <td>{{ Vdata.planOwnership }}</td>
            <td>适用事故类型</td>
            <td>{{ Vdata.accidentType }}</td>
          </tr>
          <tr>
            <td>更新日期</td>
            <td>{{ Vdata.newTime }}</td>
            <td>责任单位</td>
            <td>{{ Vdata.responsibleUnit }}</td>
          </tr>
          <tr>
            <td>救援注意事项</td>
            <td colspan="3">{{ Vdata.rescuePrecautions }}</td>
          </tr>
        </table>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <div class="layout" v-show="editVis">
      <el-form
        class="container"
        :inline="true"
        :model="editform"
        ref="editform"
        :rules="rules"
      >
        <h3>编辑</h3>
        <div class="close" @click="editVis = false">X</div>
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="6">
            <el-form-item label="预案名称" prop="planName">
              <el-input
                v-model="editform.planName"
                placeholder="请输入预案名称"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="预案类型" prop="planType">
              <el-select v-model="editform.planType" placeholder="请选择">
                <el-option
                  v-for="(item, index) in PTdata"
                  :label="item"
                  :value="item"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="6">
            <el-form-item label="预案归属" prop="planOwnership">
              <el-select v-model="editform.planOwnership" placeholder="请选择">
                <el-option
                  v-for="(item, index) in POdata"
                  :label="item"
                  :value="item"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="适用事故类型" prop="accidentType">
              <el-select v-model="editform.accidentType" placeholder="请选择">
                <el-option
                  v-for="(item, index) in ATdata"
                  :label="item"
                  :value="item"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="6">
            <el-form-item label="责任单位" prop="responsibleUnit">
              <el-input
                v-model="editform.responsibleUnit"
                placeholder="请输入责任单位"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="救援注意事项" prop="rescuePrecautions">
              <el-input
                v-model="editform.rescuePrecautions"
                placeholder="请输入救援事项"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" class="row-bg" justify="center">
          <el-col :span="3">
            <el-button type="primary" @click="submitEdit">确认</el-button>
          </el-col>

          <el-col :span="3">
            <el-button type="info" @click="cancelEdit('editform')"
              >取消</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 添加弹出框 -->
    <div class="layout" v-show="addVis">
      <el-form
        class="container"
        :inline="true"
        :model="addform"
        ref="addform"
        :rules="rules"
      >
        <h3>添加</h3>
        <div class="close" @click="addVis = false">X</div>
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="6">
            <el-form-item label="预案名称" prop="planName">
              <el-input v-model="addform.planName" placeholder="请输入预案名称">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="预案类型" prop="planType">
              <el-select v-model="addform.planType" placeholder="请选择">
                <el-option
                  v-for="(item, index) in PTdata"
                  :label="item"
                  :value="item"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="6">
            <el-form-item label="预案归属" prop="planOwnership">
              <el-select v-model="addform.planOwnership" placeholder="请选择">
                <el-option
                  v-for="(item, index) in POdata"
                  :label="item"
                  :value="item"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="适用事故类型" prop="accidentType">
              <el-select v-model="addform.accidentType" placeholder="请选择">
                <el-option
                  v-for="(item, index) in ATdata"
                  :label="item"
                  :value="item"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="6">
            <el-form-item label="责任单位" prop="responsibleUnit">
              <el-input
                v-model="addform.responsibleUnit"
                placeholder="请输入责任单位"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="救援注意事项" prop="rescuePrecautions">
              <el-input
                v-model="addform.rescuePrecautions"
                placeholder="请输入救援事项"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" class="row-bg" justify="center">
          <el-col :span="3">
            <el-button type="primary" @click="submitAdd">确认</el-button>
          </el-col>

          <el-col :span="3">
            <el-button type="info" @click="cancelAdd('addform')"
              >取消</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-container>
</template>

<script>
import Title from "../../components/common/title.vue";
import Paging from "../../components/paging/paging.vue";

export default {
  data() {
    return {
      //分页参数
      total: 1, //总共多少条，这个需要通过接口获取后赋值
      page: 1,
      pageSize: 6,
      //页面标题
      title: "预案管理",
      SecTitle: "预案列表",

      //删除的请求URL
      deleteURL: "",

      //弹窗控制
      addVis: false,
      viewVis: false,
      editVis: false,

      mainform: {
        planName: "",
        planType: "",
        accidentType: "",
      },

      //表单验证
      addform: {},
      editform: {},
      rules: {
        planName: [
          { required: true, message: "请输入预案名称", trigger: "blur" },
          { min: 1, max: 8, message: "长度在 1 到 8个字符", trigger: "blur" },
        ],
        planType: [
          { required: true, message: "请选择预案类型", trigger: "blur" },
        ],
        planOwnership: [
          { required: true, message: "请选择预案归属", trigger: "blur" },
        ],
        accidentType: [
          { required: true, message: "请输入适用事故类型", trigger: "blur" },
        ],
        rescuePrecautions: [
          { required: true, message: "请输入救援注意事项", trigger: "blur" },
          { min: 1, max: 150, message: "超出最大文本", trigger: "blur" },
        ],
        responsibleUnit: [
          { required: true, message: "请输入责任单位", trigger: "blur" },
        ],
      },

      PLform: [
        {
          accidentType: "载入中",
          id: 0,
          newTime: "载入中",
          operator: "载入中",
          planName: "载入中",
          planType: "载入中",
          planOwnership: "载入中",
          rescuePrecautions: "载入中",
          responsibleUnit: "载入中",
        },
      ],
      //用于渲染下拉框
      PTdata: [], //事故类型
      POdata: [], //预案归属
      ATdata: [], //适用事故类型

      //用于每列按钮的弹出框
      Vdata: {
        accidentType: "事故的类型",
        id: 0,
        newTime: "时间",
        operator: "操作人",
        planName: "方案名称",
        planType: "方案类型",
        planOwnership: "预案归属",
        rescuePrecautions: "救援注意事项",
        responsibleUnit: "责任单位",
      },
    };
  },
  components: {
    Title,
    Paging,
  },
  methods: {
    //子组件传入pagesize
    getPagesize(val) {
      this.pageSize = val;
      this.getPlanList();
    },
    //子组件传入CurrentPage
    getCurrentPage(val) {
      this.page = val;
      this.getPlanList();
    },

    //获取服务器数据
    getPlanList() {
      this.axios({
        method: "POST",
        url: "/planList/list",
        data: {
          accidentType: this.mainform.accidentType,
          page: this.page,
          pageSize: this.pageSize,
          planName: this.mainform.planName,
          planType: this.mainform.planType,
        },
      })
        .then((res) => {
          let myData = res.data.data;
          this.PLform = [];
          this.total = res.data.count;
          myData.forEach((obj) => {
            obj.newTime = this.tsToTime(obj.newTime);
            this.PLform.push(obj);
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getPlanType() {
      this.axios({
        method: "POST",
        url: "/PlanType/findByWhere",
      })
        .then((res) => {
          this.PTdata = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getPlanOwnership() {
      this.axios({
        method: "POST",
        url: "/PlanOwnership/findByWhereOw",
      })
        .then((res) => {
          this.POdata = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getAccidentType() {
      this.axios({
        method: "POST",
        url: "/accident/findByWhereAcc",
      })
        .then((res) => {
          this.ATdata = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    submitAdd() {
      if (
        this.addform.planName &&
        this.addform.planType &&
        this.addform.planOwnership &&
        this.addform.accidentType &&
        this.addform.responsibleUnit &&
        this.addform.rescuePrecautions &&
        this.addform.rescuePrecautions.length <= 150
      ) {
        this.axios({
          method: "POST",
          url: "/planList/add",
          data: {
            accidentType: this.addform.accidentType,
            operator: this.addform.operator,
            planName: this.addform.planName,
            planType: this.addform.planType,
            planOwnership: this.addform.planOwnership,
            rescuePrecautions: this.addform.rescuePrecautions,
            responsibleUnit: this.addform.responsibleUnit,
            newTime: Date.parse(new Date()),
            //id:"",
          },
        })
          .then((res) => {
            this.$notify({
              title: "添加成功",
              type: "success",
              duration: 2000,
            });
            this.addform = {};
            this.getPlanList();
            this.addVis = false;
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$notify({
          title: "提示",
          message: "请完善要添加的信息",
          type: "warning",
          duration: 2000,
        });
      }
    },
    submitEdit() {
      this.$refs["editform"].validate((valid) => {
        if (valid) {
          this.axios({
            method: "POST",
            url: "/planList/update",
            data: {
              accidentType: this.editform.accidentType,
              operator: this.editform.operator,
              planName: this.editform.planName,
              planType: this.editform.planType,
              planOwnership: this.editform.planOwnership,
              rescuePrecautions: this.editform.rescuePrecautions,
              responsibleUnit: this.editform.responsibleUnit,
              newTime: Date.parse(new Date()),
              id: this.editform.id,
            },
          })
            .then((res) => {
              this.$notify({
                title: "修改成功",
                type: "success",
                duration: 2000,
              });
              this.editform = {};
              this.getPlanList();
              this.editVis = false;
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$notify({
            title: "提示",
            message: "请完善所有信息",
            type: "warning",
            duration: 2000,
          });
        }
      });
    },
    deletePlan() {
      this.axios({
        method: "GET",
        url: this.deleteURL,
      })
        .then((res) => {
          this.$notify({
            title: "删除成功",
            type: "success",
            duration: 2000,
          });
          this.deleteURL = "";
          if (
            (this.total - 1) % (this.pageSize * (this.page - 1)) == 0 &&
            this.page > 1
          ) {
            --this.page;
          }
          this.getPlanList(); //重新获取列表数据
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //将时间格式转化为时间戳
    onFilter() {
      if (
        this.mainform.planName ||
        this.mainform.planType ||
        this.mainform.accidentType
      ) {
        this.page = 1;
        this.getPlanList();
      } else {
        this.$notify({
          title: "提示",
          message: "请输入要筛选的信息",
          type: "warning",
          duration: 2000,
        });
      }
    },
    //将时间戳转化为时间格式
    tsToTime(timestamp) {
      var date = new Date(timestamp);
      var Y = date.getFullYear() + "-";
      var M = date.getMonth() + 1 + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    //列表项按钮处理器
    handleAdd() {
      this.addVis = true;
      this.addform.operator = "操作员1";
    },
    handleView(index, row) {
      this.PLform.forEach((item) => {
        if (item.id == row.id) {
          this.Vdata = item;
        }
      });
      this.viewVis = true;
    },
    handleEdit(index, row) {
      this.PLform.forEach((item) => {
        if (item.id == row.id) {
          this.editform = Object.assign({}, item);
        }
      });
      this.editVis = true;
    },
    open() {},
    handleDelete(index, row) {
      this.$confirm("确认要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.PLform.forEach((item) => {
            if (item.id == row.id) {
              this.deleteURL = "/planList/delete/" + item.id;
            }
          });
          this.deletePlan();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            duration: 2000,
          });
        });
    },
    cancelAdd(formName) {
      this.$refs[formName].resetFields();
      this.addform = {};
      this.addVis = false;
    },
    cancelEdit(formName) {
      this.$refs[formName].resetFields();
      this.editform = {};
      this.editVis = false;
      d;
    },
  },
  created() {
    this.getPlanList();
    this.getPlanType();
    this.getPlanOwnership();
    this.getAccidentType();
  },
  computed: {},
};
</script>

<style scoped>
.layout {
  position: fixed;
  top: 60px;
  left: 250px;
  width: 100%;
  height: 100%;
  background-color: rgba(116, 116, 116, 0.274);
  z-index: 1000;
}
.container {
  position: fixed;
  background-color: white;
  width: 900px;
  height: 450px;
  margin: 150px 0 0 250px;
}
.container > h3 {
  text-align: center;
  height: 50px;
  background-color: rgba(215, 215, 215, 0.55);
  line-height: 50px;
}
.close {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
.close:hover {
  color: rgb(0, 132, 255);
}
.addBtn {
  float: right;
}
table {
  width: 800px;
  height: 300px;
  margin: 10px auto;
  border-collapse: collapse;
  table-layout: fixed;
}
tr,
td {
  border: 1px solid black;
}
caption {
  height: 50px;
  line-height: 50px;
  border: 1px solid black;
  border-bottom: 0px;
  font-size: large;
  font-weight: bold;
}
td {
  padding: 10px;
  word-break: break-all;
  word-wrap: break-word;
  overflow: auto;
}
tr > td:nth-child(odd) {
  background-color: rgba(184, 182, 182, 0.55);
  width: 100px;
  text-align: right;
}

tr > td:nth-child(even) {
  width: 200px;
}
</style>
